﻿*{
    margin:0 auto;
    padding: 0;
    font-size: 13px;
    font-family: "Segeo UI", sans-serif;
}
@font-face {
    font-family: "Segeo UI";
    src: url("font/SEGOEUI.TTF");
}
@font-face {
    font-family: "UTM Avo";
    src: local("UTM Avo"), url("font/utm_avo.woff");
}
ul{list-style: none;}
.clear{clear:both;}
.wrapper{
    width: 100%;
    height: 100%;
    min-width: 1000px;
}
.line{
    height: 30px;
    background: #185943;
}
.banner{
    background: #f1f1f1;
    height: 70px;
}
nav.top ul{
    margin: 3px 0 0;
    float:right;
    color: #fff;    
}
nav.top li{float: left;margin: 0 5px 0 0;}
#logo{
    float: left;
    width: 20%;
    text-align: center;
    height: 70px;
    overflow: hidden;
    }    
#soft-name{
    float: left;
    width: 60%;
    text-align: center;
    height: 70px;
    overflow: hidden;
    }
#soft-name figure{margin: 14px 0 0;}
#user{
    float: left;
    width: 20%;
    text-align: center;
    padding: 5px 0 0;
    }
#user figure,#user .info{float: left; width: 35%;}
#user .info{
    width: 60%;
    text-align: left;
    padding: 0 0 0 5px;
    }
#user .info p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}    
#content{
    background-color: #F1F1F1;
    overflow: hidden;
    margin: 0 0 1px;
    }    
section #content-left{
    width: 20%;
    height: 100%;
    float: left;
    background: #185943;
}
#content-left nav>ul.root>li{
    line-height: 41px;
    background: #185943;
    color: #fff;
    font-size: 16px;
    border-bottom: 1px solid #ffffff;
}
/*#content-left nav>ul.root>li>div.sub-item{
    display: none;
}
#content-left nav .viewport {
    overflow-y: scroll;
}*/

#content-left nav>ul>li:last-child{
    border-bottom: 1px solid #ffffff;
}
#content-left nav>ul>li a, #content-right h2.title{
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    display: block;
}
#content-left nav>ul>li>a{
    padding: 0 0 0 10px;   
    background:#1e6e53;
}

#content-left nav>ul.root li ul li a{
    font-size: 13px;
    padding-left: 25px;
    background: url("../images/list.jpg") no-repeat 10px center transparent;
    padding-left: 40px;
}
#content-left nav ul.root>li>a:hover{background: #008c5d;}
#content-left nav ul.root>li>a.active{ 
    font-weight: bold;
    font-size:18px;
	color:#fff;
	background:#2f9a76;
    border-bottom: 1px solid #fff;
    
}
#content-left nav>ul.root>li.active>a{
    
    
}
#content-left nav ul.root li ul li a:hover{background: url("../images/list.jpg") no-repeat 10px center #027133;}
#content-left nav ul.root li ul li a.active{ background: url("../images/list.jpg") no-repeat 10px center #19a657;}
#content-left nav ul li ul li{
    line-height: 40px;
}
#content-left nav ul.root li.active ul{display: block;}
section #content-right{
    width: 80%;
    height: 100%;
    float: left;
    background: #fff;
}
section.main{
    padding: 0 0 0 4px;
    height: 100%;
}
.dardboard .bottom{
    height: 60%;
    width: 100%;
}
.dardboard .bottom .main-bottom{
    padding: 2px 0 0;
    margin-top: 17px;
}
#content-right .title{
    height: 40px;
}
#content-right h2{
    height: 33px;
    background: #1e6e53;
    border-bottom: 1px solid #034730;
    padding: 10px 0 0 10px;
    color: #fff;
}
#content-right .pagging{
    height: 28px;
    background: #185943;
}
.header-of-table-in-index {
    background: #EBEBEB;
}
.bottom-of-table-in-index {
    height: 218px;
    overflow-y: scroll !important;
}
ul.toolbar{
    height: 30px;
    background: #185943;
}
ul.toolbar li{
    line-height: 30px;
    float: left;
}
ul.toolbar li a{
    border: none;
    display: block;
    margin: 0 0 0 5px;
    padding: 0 20px 0 30px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}
ul.toolbar li:hover{
	background-color:#017e54;
}
/*.btn-add{
    background: url("../images/icon/25/add.ico") no-repeat left center transparent !important;
}
.btn-edit{
    background: url("../images/icon/25/edit.svg") no-repeat left center transparent !important;
}
.btn-delete{
    background: url("../images/icon/25/delete.svg") no-repeat left center transparent !important;
}
.btn-active{
    background: url("../images/icon/25/active.svg") no-repeat left center transparent !important;
}
.btn-grant-unit{
    background: url("../images/icon/25/grant-unit.svg") no-repeat left center transparent !important;
}
.btn-add-role{
    background: url("../images/icon/25/add-role.svg") no-repeat left center transparent !important;
}
.btn-refresh{
    background: url("../images/icon/25/refresh.svg") no-repeat left center transparent !important;
}
.btn-print{
    background: url("../images/icon/25/print.svg") no-repeat left center transparent !important;
}*/

 .btn-add{
    background: url("../images/icon/25/add.jpg") no-repeat left center transparent;
}
.btn-edit{
    background: url("../images/icon/25/edit.jpg") no-repeat left center transparent;
}
.btn-delete{
    background: url("../images/icon/25/delete.jpg") no-repeat left center transparent;
}
.btn-active{
    background: url("../images/icon/25/active.jpg") no-repeat left center transparent;
}
.btn-grant-unit{
    background: url("../images/icon/25/grant-unit.jpg") no-repeat left center transparent;
}
.btn-add-role{
    background: url("../images/icon/25/add-role.jpg") no-repeat left center transparent;
}
.btn-refresh{
    background: url("../images/icon/25/refresh.jpg") no-repeat left center transparent;
}
.btn-print{
    background: url("../images/icon/25/print.jpg") no-repeat left center transparent;
}
    

.dardboard .top{
    height: 230px;
}
.top .header{
    height: 35px;
    background: #ebeaeb;
}
#box{
    height: 35px;
    background: #ebeaeb;
    position: fixed;
    width: 100%;
}
.top .box{
    overflow: hidden;
    border: 1px solid #1e6e53;
    position: relative;
    margin:0 2px 0 0;
}
.bottom{
    height: 100%;
    position: relative;
}
.grid .bottom{
    overflow-y: scroll;
}
.easy-ui {
	overflow-y: auto!important;
}
.bottom .box{
    float: left;
    width: 33%;
    height: 100%;
    margin: 0 4px 0 0;
}
.bottom .box:nth-child(3){
    margin-right: 0;
}
.content{
    border: 1px solid #1E6E53;
    position: relative;
}
.box h2{
    color: #fff;
    height: 25px;
    padding: 2px 0 0 5px;
    background: #1e6e53;
}
table.none-ui{
    width: 99%;
    text-align: left;
}
table.none-ui-in-index th, table.none-ui-in-index td {
    border-bottom: 1px dotted #cccccc;
    border-right: 1px dotted #cccccc;
}
table.none-ui-in-index th {
    font-weight: bold;
}

table.none-ui tr:hover,table.none-ui tr.active{
    background: #EAF2FF;
    cursor: pointer;
}
table.none-ui tr td,table tr th{
    padding: 0 0 0 5px;
}
.content .top table.none-ui, .content .bottom table.none-ui{
    border-collapse:collapse;
    line-height: 35px;
    width: 100%;
}
.content .bottom table{
    line-height: 30px;
}
.content .top table.none-ui
,.content .bottom table.none-ui
,.content .top table.none-ui th
,.content .bottom table.none-ui th
,.content .top table.none-ui td
,.content .bottom table.none-ui td
{
    border-right: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
}
.bottom table tr {
    line-height: 25px;
    font-size: 12px;
}
table.none-ui td.serial,table th.serial{
    width: 50px;
}
.chart{
    width: 50%;
    height: 100%;
    float: left;
    text-align: center;
}
#chart_div{
    width: 100%;
    height: 100%;
}
.analytics{
    float: left;
    width: 50%;
    text-align: center;
}
.pagging .page{
    width: 100%;
    height: 100%;
    padding: 2px 0 0 0;
}
.page a{
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 3px;
    border: 1px solid #19a657;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
.page a.active,.page a:hover{
    background: #1AA456;
}
.page .first{
    background: url("../images/icon/20/first.jpg") no-repeat center center transparent;
}
.page .prev{
    background: url("../images/icon/20/prev.jpg") no-repeat center center transparent;
}
.page .next{
    background: url("../images/icon/20/next.jpg") no-repeat center center transparent;
}
.page .last{
    background: url("../images/icon/20/last.jpg") no-repeat center center transparent;
}
.footer{
    background: #185943;
    bottom: 0;
    height: 25px;
    width: 100%;
    position: fixed;
}
.footer .ip{
    float: left;
    height: 100%;
}
.footer p{
    border: 1px solid #2da67d;
    display: block;
    padding: 0 8px;
    margin: 1px 2px 0 0;
    height: 22px;
    min-width: 25px;
    color: #fff;
}

.footer .system{
    float: right;
}
.footer .system p{
    float: left;
}
.col50{
    width: 50px;
}
.col100{
    width: 100px;    
}
.col150{
    width: 100px;    
}
.col200{
    width: 200px;
}
.col300{
    width: 300px;
}
.col30 {
    width: 30px;
}
.col80 {
    width: 80px;
}
.col80per{
    width: 80%;
}
.col20per{
    width: 20%;
}
/*thangnd + tamtt + Tudt => đã phát hiện đc thằng này là nguyên nhân dẫn đến
    lỗi vỡ combox ở các form chứng từ
    Bạn SơnHB xem lại phần nhé 
    Thanks a lot ! Have a nice day ! Good luck for you*/
.datagrid-htable {/*edited by sonHB*/
	background: #cccccc!important;
	position: fixed!important;
	top: 171px!important;
    z-index: 1;
}
.datagrid-btable {
	margin: 0!important;/*edited by sonHB*/
}
.datagrid-row-selected {
    background: #FBEC88!important;    
}